<template>
<div>
    <div class="title">热门推荐</div>
    <ul>
      <router-link

        tag="li"
        class="item"
        v-for="item of recommendList"
        :key="item.id"
         :to="'/detail/' + item.id"
      >
        <img class="item-img" :src="item.imgUrl">
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-btn">查看详情</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      recommendList: [{
        id: '0001',
        imgUrl: 'http://img1.qunarzz.com/sight/p0/1506/30/7a528fae12c17e6e29d5d13a9d9813ee.water.jpg_200x200_e7f0d0ad.jpg',
        title: '大连圣亚海洋世界',
        desc: '浪漫的大连主题乐园,浪漫的大连主题乐园浪漫的大连主题乐园,浪漫的大连主题乐园浪漫的大连主题乐园,'
      },
      {
        id: '0002',
        imgUrl: 'http://img1.qunarzz.com/sight/p0/1506/30/7a528fae12c17e6e29d5d13a9d9813ee.water.jpg_200x200_e7f0d0ad.jpg',
        title: '大连圣亚海洋世界',
        desc: '浪漫的大连主题乐园,浪漫的大连主题乐园浪漫的大连主题乐园,浪漫的大连主题乐园浪漫的大连主题乐园,'
      },
      {
        id: '0003',
        imgUrl: 'http://img1.qunarzz.com/sight/p0/1506/30/7a528fae12c17e6e29d5d13a9d9813ee.water.jpg_200x200_e7f0d0ad.jpg',
        title: '大连圣亚海洋世界',
        desc: '浪漫的大连主题乐园,浪漫的大连主题乐园浪漫的大连主题乐园,浪漫的大连主题乐园浪漫的大连主题乐园,'
      },
      {
        id: '0004',
        imgUrl: 'http://img1.qunarzz.com/sight/p0/1506/30/7a528fae12c17e6e29d5d13a9d9813ee.water.jpg_200x200_e7f0d0ad.jpg',
        title: '大连圣亚海洋世界',
        desc: '浪漫的大连主题乐园,浪漫的大连主题乐园浪漫的大连主题乐园,浪漫的大连主题乐园浪漫的大连主题乐园,'
      }
      ]
    }
  }
}
</script>

<style scoped lang="stylus">
  @import'~styles/mixins.styl'
    .title
      line-height :0.8rem
      margin-top: .2rem
      font-size :.3rem
      background :#eee
      text-indent:.2rem
    .item
      overflow: hidden
      display:flex
      height:1.9rem
      .item-img
        width: 1.7rem
        height:1.7rem
        padding:.1rem
      .item-info
        flex: 1
        min-width:0
        padding:.1rem
        .item-title
          font-size: .32rem
          line-height:.54rem
          ellipsis()
        .item-desc
          font-size: .28rem
          color: #ccc
          line-height:.4rem
          ellipsis()
        .item-btn
          float: left
          margin-top: .2rem
          background:#ff9300
          padding: 0 .1rem
          color: #fff
          border-radius:.08rem
</style>
